<!--
 * @Author: Shber
 * @Date: 2024-07-01 15:49:30
 * @LastEditors: Shber
 * @LastEditTime: 2024-07-04 15:07:40
 * @Description: 
-->
<template>
  <view class="tab_list">
    <view class="tab_item" v-for="item in tabList" :key="item.icon">
      <my-icon :fontSize="56" color="#333333" style="line-height: 0;" :name="item.icon"/>
      <text class="tab_label">{{item.label}}</text>
    </view>
  </view>
  <tm-tabs @change="tabschange" showTabsLineAni :list="goodsTabList" :item-width="180" :width="750" :default-name="tabActive"></tm-tabs>
  <view class="goods_content">
    <SideMenu :data="menuList"/>
    <view class="goods_list">
      <GoodsItem v-for="item in 10"/>
    </view>
  </view>
</template>
<script setup>
  import myIcon from '@/components/MyIcon/index.vue'
  import SideMenu from './model/SideMenu.vue'
  import GoodsItem from './model/GoodsItem.vue'

  import { ref, reactive } from 'vue'
  const tabList = reactive([
    {label:'新建商品', link:'', icon:'myicon-xinjian-e60f'},
    {label:'多选操作', link:'', icon:'myicon-duoxuankuang-e61c'},
    {label:'商品排序', link:'', icon:'myicon-ssort-e62e'},
    {label:'搜索商品', link:'', icon:'myicon-sousuo-e61f'},
    {label:'管理分类', link:'', icon:'myicon-guanlifenlei-e600'},
  ])

  const tabActive = ref(0)
  let goodsTabList = reactive([
    { key: 0, title: '全部(222)' },
    { key: 1, title: '售卖中(321)' },
    { key: 2, title: '已下架(453)' },
    { key: 3, title: '回收站(11)' },
    { key: 4, title: '已售罄(304)' },
  ])

  const menuList = ref([
    {label:'全部分类', id:0},
    {label:'玫瑰专区', id:1},
    {label:'百合专区', id:2},
    {label:'康乃馨专区', id:3},
    {label:'七夕情人节', id:4},
    {label:'绿植盆栽', id:5},
    {label:'玫瑰专区', id:11},
    {label:'百合专区', id:22},
    {label:'康乃馨专区', id:33},
    {label:'七夕情人节', id:44},
    {label:'绿植盆栽', id:55},
    {label:'玫瑰专区', id:111},
    {label:'百合专区', id:222},
    {label:'康乃馨专区', id:333},
    {label:'七夕情人节', id:444},
    {label:'绿植盆栽', id:555},
  ])
  const tabschange = (index)=>{
    // activeCom.value = tabList[index].com
  }

</script>
<style lang="scss" scoped>
.tab_list{display: flex; padding: 16px; justify-content: space-between; align-items: center; background-color: #fff;
.tab_label{font-size: 12px; color: #999;}
}
:deep(.myicon){line-height: 18px !important;}
:deep(.animateAll_tabs_tmui){width: 30px !important; height: 2px !important;}
.goods_content{margin-top: 2px; display: flex; background-color: #fff;}
.goods_list{padding: 10px;}
</style>
